<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        hello
    </div>
    <script>
        //定义data数据
        let data = {
            msg: 'hello world'
        }
        //模拟vm实例
        //Proxy直接监听对象，而非属性
        //Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）
        //const  p = new Proxy(target,handler)
        //target要使用Proxy包装的目标对象，handler，一个通常以函数作为属性的对象
        let vm = new Proxy(data, {
            //执行代理行为的函数
            //当访问vm的成员会执行
            get (target,key) {
                console.log('get key', key, target[key]);
                return target[key]
            },
            //当设置vm的成员会执行
            set(target,key,newValue) {
                console.log('set key',key ,newValue);
                if(target[key]===newValue){
                    return
                }
                target[key] = newValue
                // textContent 属性设置或者返回指定节点的文本内容。
                document.getElementById('app').textContent = target[key]
            }
        })
    </script>
</body>
</html>